<!DOCTYPE html>
<html lang="en">

<head>
    <title>WebGL 2 Samples - fbo_rtt_depth_texture</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="info">WebGL 2 Samples - fbo_rtt_depth_texture</div>
    <p id="description">
        This sample demonstrates rendering to a depth texture in a frame buffer.
    </p>

    <script id="vs-draw" type="x-shader/x-vertex">
        #version 300 es
        #define POSITION_LOCATION 0
        #define TEXCOORD_LOCATION 4

        precision highp float;
        precision highp int;

        layout(location = POSITION_LOCATION) in vec2 position;
        layout(location = TEXCOORD_LOCATION) in vec2 textureCoordinates;

        out vec2 v_st;

        void main()
        {
            v_st = textureCoordinates;
            gl_Position = vec4(position, 0.0, 1.0);
        }
    </script>

    <script id="fs-draw" type="x-shader/x-fragment">
        #version 300 es

        precision highp float;
        precision highp int;

        uniform sampler2D depthMap;

        in vec2 v_st;

        out vec4 color;

        void main()
        {
            vec3 depth = vec3(texture(depthMap, v_st).r);
            color = vec4(1.0 - depth, 1.0);
        }
    </script>

    <script id="vs-depth" type="x-shader/x-vertex">
        #version 300 es
        #define POSITION_LOCATION 0

        precision highp float;
        precision highp int;

        layout(location = POSITION_LOCATION) in vec4 position;

        void main()
        {
            gl_Position = position;
        }
    </script>

    <script id="fs-depth" type="x-shader/x-fragment">
        #version 300 es

        precision highp float;
        precision highp int;

        void main() {
            // No color out. Just depth.
        }
    </script>

    <script type="module" src="./fbo_rtt_depth_texture.ts">
   </script>
    <div id="highlightedLines"  style="display: none">#L184-L206</div>

</body>

</html>
